<template>
  <div>
    <div class="box-border p-12px">
      <el-form ref="formRef" :rules="rules" :model="submitForm" label-width="100px" class="mt-12px">
        <el-form-item label="算法名称：" prop="algorithmName">
          <ns-input v-model="submitForm.algorithmName" clearable placeholder="请输入算法名称" />
        </el-form-item>
        <el-form-item label="算法说明：" prop="description">
          <ns-input
            v-model="submitForm.description"
            type="textarea"
            :rows="5"
            clearable
            placeholder="请输入算法说明"
          />
        </el-form-item>
        <el-form-item label="算法类型：" prop="codeType">
          <el-select v-model="submitForm.codeType" placeholder="请选择算法类型">
            <!-- <el-option label="正则" value="REGEX" /> -->
            <el-option label="serverless(JAVA)" value="JAVA" />
          </el-select>
        </el-form-item>
        <el-form-item label="算法内容：" prop="value">
          <el-input
            v-model="submitForm.value"
            type="textarea"
            :rows="8"
            clearable
            placeholder="请输入算法内容"
            @change="testFlag = false"
          />
        </el-form-item>
        <el-form-item label="测试内容：">
          <ns-input
            v-model="submitForm.content"
            type="textarea"
            :rows="5"
            clearable
            placeholder="请输入测试内容"
            @change="testFlag = false"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            @click="testClick"
            :disabled="!submitForm.value || !submitForm.content"
            :loading="testLoading || confirmLoading"
            >测试验证</el-button
          >
        </el-form-item>
      </el-form>
      <el-dialog v-model="showTestRes" title="测试结果">
        <el-table :data="testTableData" style="width: 100%">
          <el-table-column prop="value" label="敏感值" />
          <el-table-column prop="beginIndex" label="起始位置" />
          <el-table-column prop="endIndex" label="终止位置" />
        </el-table>
      </el-dialog>
    </div>
    <div>
      <el-button type="primary" @click="confirm" :loading="testLoading || confirmLoading"
        >确定</el-button
      >
      <el-button @click="closeOutDrawer" :loading="testLoading || confirmLoading">取消</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Plus, Minus, Close } from '@element-plus/icons-vue'
import {
  algorithmCreate,
  algorithmUpdate,
  algorithmTest
} from '@/api/strategyManage/algorithm/index'
import SubTitle from '@/components/SubTitle/index.vue'

const message = useMessage() // 消息弹窗
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  },
  closeOutDrawer: Function
})

const testFlag = ref(false)
const showTestRes = ref(false)
const testTableData = ref([])
const testLoading = ref(false)
const confirmLoading = ref(false)

const formRef = ref()
const submitForm = ref({
  id: undefined,
  algorithmName: '',
  description: '',
  codeType: '',
  value: '',
  content: ''
})
const rules = {
  algorithmName: [{ required: true, message: '算法名称不能为空', trigger: 'blur' }],
  description: [{ required: true, message: '算法说明不能为空', trigger: 'blur' }]
}

const confirm = async () => {
  if (!testFlag.value) {
    message.warning('请先进行测试验证')
    return
  }
  try {
    confirmLoading.value = true
    const apiInterface = props.params.id ? algorithmUpdate : algorithmCreate
    formRef.value.validate(async (valid) => {
      if (valid) {
        const data = await apiInterface({
          ...submitForm.value,
          isConfig: '1'
        })
        console.log('data', data)
        if (data) {
          message.success('操作成功')
          props.params.callBack()
          props.closeOutDrawer()
        }
      }
    })
  } finally {
    confirmLoading.value = false
  }
}

const testClick = async () => {
  try {
    testLoading.value = true
    const data = await algorithmTest({
      value: submitForm.value.value,
      content: submitForm.value.content
    })
    console.log('data', data)
    if (data.result === '1') {
      testFlag.value = true
      message.success('验证成功')
      if (data.valueLocationResults && data.valueLocationResults.length > 0) {
        showTestRes.value = true
        testTableData.value = data.valueLocationResults
      }
    } else {
      testFlag.value = false
      message.warning('验证失败')
    }
  } finally {
    testLoading.value = false
  }
}

onMounted(() => {
  if (props.params.id) {
    submitForm.value = props.params
  }
})
</script>

<style scoped lang="scss">
:deep(.el-table .el-form-item--default) {
  margin-bottom: 0 !important;
}
</style>
